<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>数据绑定</title>
    <!-- ctrl + k + c单行注释    这里引入开发的VUE-->
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      Vue.config.productionTip = false;
    </script>
  </head>
  <body>
    <div id="root">
      <!--单向绑定：页面修改的值不会回写到VUE中-->
      单向数据绑定：<input type="text" :value="name" /><br />
      <!--双向绑定：页面修改的值可以回写到VUE中，v-model一般用于表单输入元素-->
      <!--因为其核心就是修改value值，写的时候:value可以省略。 没有value的元素不能使用model指令-->
      双向数据绑定：<input type="text" v-model="name" />
    </div>
  </body>

  <script type="text/javascript">
    //创建Vue实例
    new Vue({
      el: "#root", //element缩写，指定当前实例为哪个容器服务，值通常为CSS选择器字符串。   #为id选择器  .为class选择器
      data: {
        name: "尚硅谷123",
      },
    });
  </script>
</html>
